<template>
	<form-frame v-model="visible" title="配置" width="640" :type="formType" :loading="btnLoading" @submit="handleSubmitForm()">
		<el-form size="medium" ref="form" :model="formData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-form-item label="配置类型" prop="type">
				<el-select v-model="formData.type" placeholder="请选择配置类型" style="width: 100%">
					<el-option v-for="(item, index) in configTypeData" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="配置名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入配置名称"></el-input>
			</el-form-item>
			<el-form-item label="配置标识" prop="filed13">
				<el-select v-model="formData.filed13" placeholder="请选择配置类型" style="width: 100%">
					<el-option v-for="(item, index) in configTypeData" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
				<el-input v-model="formData.filed13" placeholder="请输入配置标识"></el-input>
			</el-form-item>
			<el-form-item label="配置描述" prop="content">
				<el-input type="textarea" v-model="formData.content" placeholder="请输入配置描述"></el-input>
			</el-form-item>
			<el-row :gutter="32">
				<el-col :span="12">
					<el-form-item label="配置类型" prop="filed1">
						<el-select v-model="formData.filed1" placeholder="请选择配置类型">
							<el-option label="数字" value="1"></el-option>
							<el-option label="文本" value="2"></el-option>
							<el-option label="单选" value="3"></el-option>
							<el-option label="单选(图片)" value="4"></el-option>
							<el-option label="枚举" value="5"></el-option>
							<el-option label="开关" value="6"></el-option>
							<el-option label="多行文本" value="7"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input-number v-model="formData.sort" controls-position="right"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isRadioType">
					<el-form-item label="单选选项" prop="filed22">
						<radio-option v-model="formData.filed22" :type="formData.filed1"></radio-option>
					</el-form-item>
				</el-col>
				<template v-else-if="formData.filed1 === '1'">
					<el-col :span="12">
						<el-form-item label="标题" prop="filed19">
							<el-input v-model="formData.filed19" placeholder="请输入标题"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单位" prop="filed20">
							<el-input v-model="formData.filed20" placeholder="请输入单位"></el-input>
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
	</form-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import radioOption from './options';
import formMixins from '@/views/common/formMixins';
import { getDictDefineList } from '@/api/system/tbSysDictDefinition';
import { queryConfig, addedConfig, updateConfig } from '@/api/system/tbSysConfig';
export default {
	mixins: [formMixins],
	components: { radioOption },
	props: {
		type: { type: String, default: '' }
	},
	data() {
		return {
			formName: '配置',
			formRules: {
				name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
				filed13: [{ required: true, message: '请输入配置标识', trigger: 'change' }],
				filed1: [{ required: true, message: '请选择配置类型', trigger: 'change' }]
			}
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		configTypeData() {
			return this.dictEnums['SYSTEM_BASE_CONFIG'] || [];
		},
		isRadioType() {
			return ['3', '4'].some((n) => n === this.formData.filed1);
		}
	},
	methods: {
		//通过编码获取字典定义数据
		async getDictDefineData(code) {
			let params = { page: 1, limit: 1, code };
			let result = await getDictDefineList(params).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(this.$detailData(result.data));
			}
		},

		//获取数据详情
		async getDataDetail() {
			await this.getFormDetail(queryConfig, this.dataId);
			if (this.addOrEdit) {
				this.$set(this.formData, 'type', this.type);
			}
		},

		//添加修改请求
		async submitFormRequest() {
			let params = { ...this.formData };
			let dictData = await this.getDictDefineData(params.filed13);
			params['filed14'] = Object.keys(dictData).length !== 0 ? dictData.id : '';
			await this.handleSubmitFunction(params, addedConfig, updateConfig);
			this.$store.dispatch('getSiteConfig');
		}
	}
};
</script>
